<!--  -->
<template>
  <div class="delet">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <div class="conten2 jjgd">
      <van-swipe class="my-swipe" :autoplay="1000" indicator-color="#1989fa">
        <van-swipe-item v-for="item in cpdata22.imgList" :key="item.id">
          <img :src="item.path" alt="" />
        </van-swipe-item>
      </van-swipe>
      <van-cell-group>
        <van-cell :title="cpdata22.name">
          <template #label>
            <span class="custom-title">{{ cpdata22.price | hhh}}</span>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-row>
            <van-col span="10">免运费</van-col>
            <van-col span="14">库存：{{ cpdata22.stock || 0 }}</van-col>
          </van-row>
        </template>
      </van-cell>
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-row>
            <van-col span="10">销量：{{ cpdata22.sales }}</van-col>
            <van-col span="14">收藏：{{ cpdata22.likes }}</van-col>
          </van-row>
        </template>
      </van-cell>
     
        <van-tabs v-model="active" sticky :offset-top="46">
          <van-tab title="图片" class="tupian">
            <img
              v-for="item in cpdata22.detailImgList"
              :key="item.id"
              :src="item.path"
              alt=""
            />
          </van-tab>
          <van-tab title="参数">
            <van-cell v-for="item in cpdata22.properties" :key="item.id">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <van-row>
                  <van-col span="10">{{ item.name }}</van-col>
                  <van-col span="14">{{ item.detail }}</van-col>
                </van-row>
              </template>
            </van-cell>
          </van-tab>
        </van-tabs>
    
    </div>

    <van-goods-action>
      <van-goods-action-icon :icon="like ? 'like' : 'like-o'" text="收藏"  @click="qdr"/>
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/car')" />
      
      <van-goods-action-button type="warning" text="加入购物车" @click="tjgwc"/>
      <van-goods-action-button type="danger" text="立即购买"  @click="buyclick"/>
    </van-goods-action>
  </div>
</template>

<script>
import { getluyou1 ,shouc,delete1,addgouwuce1} from "network/api.js";
import { mapState ,mapMutations} from "vuex";
import lsccshujzhu from "@/utll/strong/strong.js";
export default {
  data() {
    return {
      cpdata22: {},
      active: 0,
      cpdata33:[],
    
    };
  },

  computed: {
    ...mapState(["userInfo"]),
  
    like(){
      
      
     if(!(this.userInfo.likeList)){
      
       return false
     }else{
       
       let{likeList}=this.$store.state.userInfo
       
       
      return likeList.some(item=>item.product_id==this.$route.query.id)
       
      
     }
    
      
      

    }
  },

  methods: {
    //购买
    buyclick(){
      if(!sessionStorage.getItem('token')) return this.$router.push("/login")
      let {name,price,cover,id:product_id}=this.cpdata22
      lsccshujzhu.set('spxinxi',[{name,price,cover,product_id,count:1}])
      this.$router.push("/orderdd")
    },
    ...mapMutations(["zsdata"]),
    async getsj2() {
      const hh3 = await getluyou1(this.$route.query.id);
      this.cpdata22 = hh3.data;
      console.log(hh3);
    },
    //收藏商品
    qdr(){
      if(!(sessionStorage.getItem("token"))){
        this.$router.push('/login')
        return
      }
      
      if(!this.like){
        // let{likeList}= this.$store.state.userInfo
      
        shouc(this.$route.query.id).then(data=>{let{id:product_id,cover,name,price}=this.cpdata22
        this.cpdata33={product_id,cover,name,price}
       
        // this.$store.commit('zsdata',this.cpdata33)
        this.zsdata(this.cpdata33)
        this.$toast('收藏成功')
       }
        
        )
      }else{
        
        delete1(this.$route.query.id).then(_=>{this.$store.commit('zsdata',this.$route.query.id)
        this.$toast('取消收藏')})
      }
      
     
    },
    //添加商品
    async tjgwc(){
      const ggg=await addgouwuce1({product_id:this.cpdata22.id})
      this.$toast('添加成功')
    }
  },
  created() {
    this.getsj2();
  },
};
</script>
<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  height: 337px;
  // background-color: #39a9ed;
  img {
    width: 100%;
    height: 100%;
  }
}
.custom-title {
  color: #ffc8ac;
}

.tupian {
  img {
    width: 100%;
    height: 100%;
  }
}

</style>